<template>
	<div id="houtaiIndex">
		<el-container>
  		<el-header height='70px'>
			 <el-row>
				<el-col :span="8" ><div class="grid-content bg-purple" >
					 <img :src="logo" alt="" id="mylogo">
					</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light" style="text-align:center">
					<span>后台系统</span>
					</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple"   style="text-align:right">
					 <el-button round size='mini' @click="to">查看个人信息</el-button>
<!-- 待完成==================================================================个人信息 -->
					 <span id="loginMsg">{{userName}},欢迎你</span>
					 <i class="el-icon-user-solid"></i>
					 <router-link to="/login"><span @click="outlogin" id="exit">退出</span></router-link>
					</div></el-col>
			</el-row>
  		</el-header>
  		<el-container>
    	<el-aside width="200px" :style="{height: screenHeight + 'px'}">
			<el-menu
			router
			:default-active="routerPath"
			class="el-menu-vertical-demo"
			:collapse='false'
			:unique-opened='true'> 
			<!-- 花里胡哨 -->
			<el-menu-item index="/tomain">
        	<i class="el-icon-setting"></i>
        	<span slot="title">主页</span>
      		</el-menu-item>
			<el-submenu index="1" v-show='istrue[0]'>
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>菜单管理</span>
			</template>
			<el-menu-item index="/tofoods1">菜单设置</el-menu-item>
			<el-menu-item index="/tofoods2">菜单类别</el-menu-item>
			</el-submenu>
			<el-submenu index="2" v-show='istrue[1]'>
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>运营管理</span>
			</template>
			<el-menu-item index="/tooperate1">排班管理</el-menu-item>
			<el-menu-item index="/tooperate2">营业管理</el-menu-item>
			<el-menu-item index="/tooperate3">餐桌管理</el-menu-item>
			<el-menu-item index="/tooperate4">会员管理</el-menu-item>
			</el-submenu>
			<el-submenu  index="3" v-show='istrue[2]'>
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>库存管理</span>
			</template>
			<el-menu-item index="/toinventry1">消耗品管理</el-menu-item>
			<el-menu-item index="/toinventry2">消耗品类型</el-menu-item>
			</el-submenu>
			<el-submenu  index="4" v-show='istrue[3]'>
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>信息管理</span>
			</template>
			<el-menu-item index="/tobasis1">员工管理</el-menu-item>
			<el-menu-item index="/tobasis2">职位管理</el-menu-item>
			<el-menu-item index="/tobasis3">权限管理</el-menu-item>
			</el-submenu>
			<el-submenu index="5" v-show='istrue[5]'>
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>系统设置</span>
			</template>
			<!-- <el-menu-item index="/tosystem1">数据备份</el-menu-item> -->
			<el-menu-item index="/tosystem2">操作日志</el-menu-item>
			</el-submenu>
			<el-submenu index="6" v-show='istrue[4]'>
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>财务分析</span>
			</template>
			<el-menu-item index="/tofinance1">财务管理</el-menu-item>
			<!-- <el-menu-item index="/tofinance2">成本管理</el-menu-item> -->
			<el-menu-item index="/tofinance3">工资管理</el-menu-item>
			</el-submenu>
			</el-menu>
    	</el-aside>
    	<el-main>
    		<router-view/>
    	</el-main>
  		</el-container>
		</el-container>
	</div>
</template>
<script>
	import {mapActions} from 'vuex'
	export default{
		name:'index',
		data(){
			return {
				screenHeight: document.body.clientHeight,
				istrue:[false,false,false,false,false,false,],
				logo:require('../../assets/images/mylogo.png'),
				userName:this.$store.state.login.user.name,
			}
		},
		methods:{
			...mapActions(['actOutlogin']),
			outlogin(){
				this.actOutlogin()
			},
			to(){
				this.$router.push('/togrzx')
			}
		},
		mounted(){
			const that = this
  			window.onresize = () => {
    		return (() => {
      		window.screenHeight = document.body.clientHeight
       		that.screenHeight = window.screenHeight
   		 	})()
  			}
		},
		created(){
			let str = sessionStorage.getItem('per_id')
			for(let i = 0;i<str.length;i++){
				this.istrue[str[i]-1] = true
			}
			// console.log(this.istrue[str[0]])
			// console.log(this.istrue)
			// this.istrue = false
			// this.routerPath = this.$route.path 获取路由地址
			// 根据权限修改导航的禁用
		},
		watch: {
      		screenHeight (val) {
        		if (!this.timer) {
          			this.screenHeight = val
          			this.timer = true
          			let that = this
          			setTimeout(function () {
            			// console.log(that.screenHeight)
            			that.timer = false
          			}, 400)
        		}
      		}
    	},
    	computed:{
    		routerPath(){
    			let path = ''
    			if(this.$route.path==='/index2'){
    				path = '/tomain'
    			}else{
    				path = this.$route.path
    			}
    			return path
    		}
    	}
	}
</script>
<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    /* text-align: center; */
    line-height: 70px;
    /*高度在标签内设置的*/
	margin: 0;
	padding: 0;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
    #mylogo{
	  height: 70px;
	  width: 200px;
  }
  #exit{
	  margin: 0 15px;
  }
  a{
	  text-decoration: none;
  }
  #loginMsg{
 	margin: 0 15px;
  }
</style>